<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ljybox1{
            width: 100%;
            height: 50px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
        }
        #ljybox1 span{
            font-size: large;
            left: 70%;
        }
        #ljybox2{
            width: 100%;
            height: 2200px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            top: 60px;
        }
        .ljyleft{
            width: 208px;
            height: 1200px;
            background-color: white;
            position: fixed;
            top: 60px;
            left: 0;
        }
        .ljyright{
            width: 1800px;
            position: fixed;
            justify-content: space-around;
            align-items: center;
            top: 60px;
            left: 208px;
        }
        .icon-xiaohongshu {
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
            margin-top: 0px;
        }
/***************下拉菜单************/
        .text{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            margin-left: auto; /* 自动外边距将元素推到最右边 */
            margin-right: 100px;
        }
        .dropbtn {
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /* 下拉按钮悬停效果 */
        .dropbtn:hover, .dropbtn:focus {
            background-color: #2980b9;
        }
        /* 下拉内容容器样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }   
        /* 下拉内容样式 */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            margin-left: 20px;
            margin-top: 170px;
            box-shadow: 0px 8px 16px 0px rgba(227, 217, 217, 0.2);
            z-index: 10;
        }
        /* 下拉内容中的链接样式 */
        .dropdown-content a {  
            background-color: rgb(214, 214, 214);
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            margin-top: -70px;
        }
        /* 下拉内容中的链接悬停效果 */
        .dropdown-content a:hover {background-color: #e9e9e9}
        /* 显示下拉菜单 */
        .show {
            display: block;
        }
/***********left**************/
            .issue {
            width: 150px;
            height: 30px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-radius: 10px;
            background-color: rgb(255, 67, 67);
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-top: 10px;
            margin-left: 15px;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        ul {
            width: 200px;
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 15px;
            cursor: pointer;
        }
        .submenu {
            display: none;
            list-style-type: none;
            padding: 0;
            margin-left: 20px;
            color: #000;
        }
        .submenu li {
            padding: 10px;
        }
        .p {
            padding: 15px;
            cursor: pointer;
        }    
        li:hover {
            color: red;
        }
/*************图标*******************/
        .icon-tubiao- {
            width: 50px;
            height: 15px;
            fill: currentColor;
            overflow: hidden;
            z-index: 1;
            margin-left: 50px;
        }
/************ 右边 ****************/
       .ljyright{
            width: 1450px;
            height: 850px;
            background-color: white;
            position: fixed;
            justify-content: space-around;
            align-items: center;
            top: 75px;
            left: 228px;
        }
        .horizontal{
            width: 1450px;
            height: 70px;
            background-color: #ffffff;
            display: flex;
            border-bottom: 1px solid #ccc;
        }
       .nav{
            width: 100px;
            height: 50px;
            background-color: #ffffff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 10px;
            margin-top: 15px;
            border-bottom: 2px solid rgb(0, 30, 255);
        }
        .nav p{
            font-size: large;
        }
        .nav:hover{
            background-color: #ccc;

        }
       .content{
            width: 1450px;
            height: 750px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 15px;
        }
       .content span{
            position: relative;
            left: 650px;
            top: 400px;
            font-size: large;
       }
/*************** 内容 **************/
       .allcard{
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 盒子之间的间隔 */
            padding: 10px;
        }
      .card-box {
            width: 650px; /* 盒子的宽度 */
            height: 110px; /* 盒子的高度 */
            background-color: #f0f0f0; /* 盒子的背景颜色 */
            border: 1px solid #ccc; /* 盒子的边框 */
            margin-top: 20px; /* 盒子的垂直外边距 */
            margin-right: 10px; /* 盒子的水平外边距 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: center;
        }
          /* 修正最后一列的右边距 */
        .box:nth-child(2n) {
            margin-right: 0;
        }
        /* 修正第一行的上边距 */
        .box:first-child {
            margin-top: 0;
        }
        /* 按钮 */
        .details-button {
            background-color: #ffffff; 
            color: rgb(0, 0, 0);
            padding: 10px 20px;
            border: 1px solid #ccc;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        .details-button:hover {
            background-color: #dbdbdb; 
        }
        .picture{
            width: 100px;
            height: 100px;
            margin-left: 0;
            margin-top: 0;
       }
        .picture img{
            width: auto;
            height: auto;
            width: 100px;
            height: 100px;
            margin-left: 0;
            margin-top: 0;
       }
       .textbox {
            flex-grow: 1; /* 让文本框扩展以填充剩余空间 */
            margin-left: 20px; /* 文本框与图片的间隔 */
            font-size: 16px;
            color: #333;
            text-align: left;/*左对齐*/
            line-height: 0.5;
        }
/**************** 隐藏背景 ****************/
        /* 模态框（背景）的样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定位置 */
            z-index: 1; /* 位于顶层 */
            left: 0;
            top: 0;
            width: 100%; /* 全宽 */
            height: 100%; /* 全高 */
            background-color: rgb(0,0,0); /* 背景色 */
            background-color: rgba(0,0,0,0.4); /* 半透明背景 */
        }
        /* 模态框内容的样式 */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 600px; /* 宽度 */
            height: 900px;
            float: right;
        }
        /* 关闭按钮的样式 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,.close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .detail{
            display: flex;
        }
        .template{
            width: 300px;
            height: 900px;
            float: left;
        }
       .template img{
            width: 300px;
            height: 850px;
            flex-grow: 1;
       }
       .info{
            width: 300px;
            height: 850px;
            float: right;
            margin-left: 10px;
            font-size: 16px;
            line-height: 0.5;
       }
       .info p{
            color: #959595;
       }
       .info .issue{
            width: 80px;
            height: 30px;
       }
       .info .issue p{
            color: white;
            
       }
    </style>
</head>
<body>
    <div id="ljybox1">
        <svg class="icon-xiaohongshu" aria-hidden="true">
            <use xlink:href="#icon-xiaohongshu"></use>
          </svg>
        <span>创作服务平台</span>
        <div class="text">
            <span onclick="toggleDropdown()">用户名</span>
            <div id="myDropdown" class="dropdown-content">
                <a href="#">退出登录</a>
            </div>
        </div>
</div>
<div id="ljybox2">
    <div class="ljyleft">
        <div class="issue">
            <p>发布笔记</p>
        </div>
        <ul>
            <li>首页</li>
            <li>笔记管理</li>
            <li class="menu-item" onclick="toggleSubMenu(this)">数据看板
                <svg class="icon-tubiao-" aria-hidden="true">
                    <use xlink:href="#icon-tubiao-"></use>
                  </svg>
                <ul id="data-dashboard-submenu" class="submenu">
                    <li>账号浏览</li>
                    <li>内容分析</li>
                    <li>粉丝数据</li>
                </ul>
            </li>
            <li>活动内容</li>
            <li>笔记灵感</li>
            <li>创作学院</li>
            <li>创作百科</li>
            <!-- Add more items as needed -->
        </ul>
    </div>
    <div class="ljyright">
        <div class="horizontal">
            <div class="nav" data-target="all-activities">
                <p>全部活动</p>
            </div>
            <div class="nav" data-target="my-favorites">
                <p>我的收藏</p>
            </div>
        </div>
        <div id="all-activities" class="content">
            <div class="allcard">

            </div>
        </div>
        <div id="my-favorites" class="content" style="display: none;">
            <span>您还没有收藏活动</span>
        </div>
        <div id="modal-container" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <p>活动详情</p>
                <div class="detail">
                    <div class="template">
                        <img src=".\6FD63F6C-C80D-451d-ACC8-CA433CC6C91E.png" alt="">
                    </div>
                    <div class="info">
                        <h3>2024理财趋势</h3>
                        <h4>活动标题</h4>
                        <p>12-15 至 01-30</p>
                        <h4>活动亮点</h4>
                        <p>晒晒你的年终理财成绩单</p>
                        <h4>活动话题</h4>
                        <p>#2024理财趋势</p>
                        <div class="issue">
                            <p>去发布</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 假设有一些卡片数据
    var cards = 
    [
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160056.png",
      "alt": ""
    },
    "textbox": {
      "title": "2024理财趋势",
      "description": "晒晒你的年终理财成绩单",
      "dateRange": "12-15 至 01-30"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160233.png",
      "alt": ""
    },
    "textbox": {
      "title": "2024旅行结算",
      "description": "瓜分1亿流量赢旅行基金",
      "dateRange": "12-13 至 01-15"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160236.png",
      "alt": ""
    },
    "textbox": {
      "title": "冬日好好宅",
      "description": "分享冬日的家享专属流量扶持",
      "dateRange": "12-11 至 01-21"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160240.png",
      "alt": ""
    },
    "textbox": {
      "title": "周末玩车俱乐部",
      "description": "在下个弯道加速解锁飞驰人生",
      "dateRange": "12-07 至 01-07"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160243.png",
      "alt": ""
    },
    "textbox": {
      "title": "梦中情棍大赛",
      "description": "用一根棍子横扫百万流量",
      "dateRange": "12-02 至 12-20"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160246.png",
      "alt": ""
    },
    "textbox": {
      "title": "小进步学年",
      "description": "参与赢知识月历和千万曝光",
      "dateRange": "12-15 至 01-19"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160249.png",
      "alt": ""
    },
    "textbox": {
      "title": "玩车人年终述职",
      "description": "玩车这一年展开说说吧",
      "dateRange": "12-13 至 01-30"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160252.png",
      "alt": ""
    },
    "textbox": {
      "title": "看一场海边的冰河世纪",
      "description": "发笔记赢流量奖励和旅行基金",
      "dateRange": "12-11 至 02-06"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160255.png",
      "alt": ""
    },
    "textbox": {
      "title": "大声安利地道美食",
      "description": "赢20万流量和薯队长玩偶",
      "dateRange": "12-04 至 12-30"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
  "class": "card-box",
  "image": {
    "src": "微信图片_20241216160258.png",
    "alt": ""
  },
  "textbox": {
    "title": "冬日用车计划",
    "description": "让爱车永远保持最佳状态",
    "dateRange": "12-01 至 02-15"
  },
  "button": {
    "class": "details-button",
    "text": "查看详情"
  }
}
]
    // 遍历卡片数据并生成卡片
    cards.forEach(function(card) {
        var cardElement = document.createElement('div');
        cardElement.className = card.class;
        cardElement.innerHTML = `
            <div class="picture">
                <img src="${card.image.src}" alt="${card.image.alt}">
            </div>
            <div class="textbox">
                <h4>${card.textbox.title}</h4>
                <p>${card.textbox.description}</p>
                <p>${card.textbox.dateRange}</p>
            </div>
            <button class="details-button">${card.button.text}</button>
        `;
        document.querySelector('.allcard').appendChild(cardElement);
    });
    // 动态生成卡片的函数
function generateCards(cards) {
  var container = document.querySelector('.allcard'); // 获取卡片容器
  container.innerHTML = ''; // 清空现有内容

  cards.forEach(function(card) {
    var cardElement = document.createElement('div');
    cardElement.className = card.class;
    cardElement.innerHTML = `
      <div class="picture">
        <img src="${card.image.src}" alt="${card.image.alt}">
      </div>
      <div class="textbox">
        <h4>${card.textbox.title}</h4>
        <p>${card.textbox.description}</p>
        <p>${card.textbox.dateRange}</p>
      </div>
      <button class="details-button">${card.button.text}</button>
    `;
    container.appendChild(cardElement);
  });
}
</script>

  <script>// 点击卡片时显示模态框
    // 为每个card-box添加点击事件监听器
    document.querySelectorAll('.card-box').forEach(function(cardBox) {
        cardBox.addEventListener('click', function() {
            // 获取模态框内容区域的ID
            var targetModalContent = this.id.replace('modal-card-box', 'modal-content');          
            // 显示模态框
            document.getElementById('modal-container').style.display = 'block';
            // 填充模态框内容
            document.getElementById(targetModalContent).innerHTML = '<p>模态框内容</p>'; // 这里应该根据实际情况填充内容
        });
    });
    // 获取模态框
    var modal = document.getElementById("modal-container");
    // 获取关闭模态框的<span>元素
    var span = document.getElementsByClassName("close")[0];
    // 当点击<span> (x) 时关闭模态框
    span.onclick = function() {
      modal.style.display = "none";
    }
    // 当点击模态框外部时关闭模态框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
  </script>
<script>// 4.点击导航项时切换内容区域
    document.querySelectorAll('.nav').forEach(function(navItem) {
    navItem.addEventListener('click', function() {
        document.querySelectorAll('.nav').forEach(function(item) {
            item.classList.remove('active');
        });
        // 添加激活状态到当前点击的导航项
        this.classList.add('active');
        // 获取目标内容区域的ID
        var target = this.getAttribute('data-target');
        // 隐藏所有内容区域
        document.querySelectorAll('.content').forEach(function(content) {
            content.style.display = 'none';
        });
        // 显示对应的内容区域
        document.getElementById(target).style.display = 'block';
    });
});
</script>
    <script>// 点击下拉菜单按钮时显示或隐藏下拉菜单
        function toggleDropdown() {
        var dropdown = document.getElementById("myDropdown");
        if (dropdown.style.display === "block") {
             dropdown.style.display = "none";
        } 
        else {
            dropdown.style.display = "block";
        }
    }
        // 点击下拉菜单外部时关闭菜单
        window.onclick = function(event) {
        if (!event.target.matches('.text span')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.style.display === "block") {
                    openDropdown.style.display = "none";
                }
            }
        }
        }
    </script>
    <script>//left点击下拉菜单按钮时显示或隐藏下拉菜单
            function toggleSubMenu(element) {
            var submenu = document.getElementById('data-dashboard-submenu');
            if (submenu.style.display === 'none' || submenu.style.display === '') {
                submenu.style.display = 'block';
            } else {
                submenu.style.display = 'none';
            }
        }
    </script>
    <script src="./iconfont.js"></script>
</body>
</html>